<template>
  <div class="container index">
    <div v-if="mode === 0">
      <div v-if="!accessToken" class="get">
        <loginPage @loginEvent="getList()"></loginPage>
      </div>
      <div v-if="accessToken">
        <div class="loading-list" :class="{'showLoadingList': loadingList, 'hideLoadingList':!loadingList}" v-if="loadingList" v-text="loadingListTitle"></div>
        <lists :artList="artList"></lists>
        <div class="no-list" v-if="isLastPage">亲，暂时没有内容~~~</div>
      </div>
    </div>

    <div v-if="mode === 1">
      <about></about>
    </div>
  </div>
</template>

<script>
// import { getStorage } from '@/utils/wechat'
import about from '@/components/about'
import lists from '@/components/article-list'
import loginPage from '@/components/login-page'
// import MpLoadmore from 'mp-weui/packages/loadmore'
import { mixinsMode } from '@/components/mixins/mixins-mode'
import { getList } from '@/utils/api'
export default {
  data () {
    return {
      loadingList: false,
      // animation: null,
      loadingListTitle: '加载中...',
      appCode: null,
      phoneData: {},
      accessToken: wx.getStorageSync('accessToken'),
      // pload: false,
      mode: null,  // 0 运营模式，1 是审核模式
      page: 1,
      artList: [],
      isLastPage: false,
      authorize: false
    }
  },
  mixins: [mixinsMode],
  components: {
    about,
    lists,
    loginPage
    // MpLoadmore
  },
  onLoad () {
    if (this.accessToken) {
      this.page = 1
      this.getList('refresh')
    }
  },
  onShow () {
    // console.log(wx.getStorageSync('accessToken'))
    // this.page = 1
    this.accessToken = wx.getStorageSync('accessToken')
    // 转发返回首页处理
    if (this.artList.length === 0) {
      this.page = 1
      this.getList('refresh')
      wx.setNavigationBarTitle({
        title: wx.getStorageSync('title')
      })
    }
  },
  created () {
    // this.getCache()
    wx.getStorageSync('accessToken')
    // wx.getStorage({
    //   key: 'mode',
    //   success: function(res) {
    //     this.mode = res.data
    //   }
    // })
    if (this.mode === null) {
      this.getMode()
    }
    wx.showShareMenu({
      withShareTicket: true
    })
    wx.setNavigationBarTitle({
      title: wx.getStorageSync('title')
    })
  },
  onShareAppMessage (res) {
    return {}
  },
  onPullDownRefresh () {
    if (this.mode === 0) {
      this.page = 1
      this.getList('refresh')
    }
    wx.stopPullDownRefresh()
  },
  onReachBottom () {
    if (!this.isLastPage && this.mode === 0) {
      this.page++
      this.getList()
    }
  },
  methods: {
    // async getCache () {
    //   try {
    //     let res = await getStorage('accessToken')
    //     const { token, expires } = res.data
    //     // 有缓存，判断是否过期
    //     if (token && expires > Date.now()) {
    //       this.accessToken = token
    //       this.getMode()
    //     } else {
    //       // console.log('已经过期')
    //     }
    //   } catch (error) {
    //     // console.log('已经过期')
    //   }
    // },
    async getList (param) {
      // this.pload = true
      this.loadingList = true
      this.loadingListTitle = '加载中...'
      this.accessToken = wx.getStorageSync('accessToken')
      console.log(this.accessToken)
      try {
        let res = await getList({
          pageSize: 10,
          pageNum: this.page
        })
        if (res === undefined) {
          this.accessToken = null
          return
        }
        if (param === 'refresh') {
          this.artList = []
        }
        let data = res.list.map(item => {
          if (item.imgUrl) {
            item.imgUrl = item.imgUrl.split(',')
          }
          return item
        })
        this.loadingListTitle = `已为您加载${res.list.length}条内容`
        setTimeout(() => {
          this.loadingList = false
        }, 1000)
        this.artList = this.artList.concat(data)
        this.pages = res.pages
        this.isLastPage = res.isLastPage

        this.artList.forEach((item) => {
          let curTime = Date.parse(new Date())
          let subtractTime = curTime - item.createTime
          if (subtractTime < 10800000) {
            item.isHot = true
          } else {
            item.isHot = false
          }
        })
        // this.page++
      } catch (e) {
        // this.pload = false
      }
      // this.pload = false
    }
  }
}
</script>

<style scoped lang="scss">
.index {
  .no-list {
    font-size: 28px;
    text-align: center;
    padding: 50px 0;
    color: $color-font-content;
  }
  .loading-list {
    width: 100%;
    height: 0px;
    line-height: 50px;
    font-size: 28px;
    color: $color-danger;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 3;
    display: none;
    background-color: #eeeeed;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out; /* Firefox 4 */
    -webkit-transition: all 0.5s ease-out; /* Safari and Chrome */
    -o-transition: all 0.5s ease-out; /* Opera */
  }
  .showLoadingList {
    height: 50px;
    display: block;
  }
  .hideLoadingList {
    height: 0;
    display: none;
  }
}
</style>
